<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>input应用 | 我的课程记录笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../../gitbook/style.css">
    
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-sectionx/sectionx.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../../md/html/form1.html" />
    
    
    <link rel="prev" href="../../md/html/form.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="3.14.1"
        data-chapter-title="input应用"
        data-filepath="md/html/input.md"
        data-basepath="../.."
        data-revision="Fri Dec 29 2017 10:52:40 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="md/gitbook.html">
            
                
                    <a href="../../md/gitbook.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        gitbook的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2" data-path="md/git.html">
            
                
                    <a href="../../md/git.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        git的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3" data-path="md/html/html.html">
            
                
                    <a href="../../md/html/html.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        html
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.1" data-path="md/html/a标签锚点.html">
            
                
                    <a href="../../md/html/a标签锚点.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                        a标签锚点
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="md/html/ul.html">
            
                
                    <a href="../../md/html/ul.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.</b>
                        
                        ul标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.3" data-path="md/html/ol.html">
            
                
                    <a href="../../md/html/ol.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.</b>
                        
                        ol标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.4" data-path="md/html/dl自定义列表.html">
            
                
                    <a href="../../md/html/dl自定义列表.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.4.</b>
                        
                        dl自定义列表
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.5" data-path="md/html/内嵌页面.html">
            
                
                    <a href="../../md/html/内嵌页面.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.5.</b>
                        
                        内嵌页面标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.6" data-path="md/html/网页icon.html">
            
                
                    <a href="../../md/html/网页icon.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.6.</b>
                        
                        网页icon
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.7" data-path="md/html/微博组件使用.html">
            
                
                    <a href="../../md/html/微博组件使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.7.</b>
                        
                        微博组件使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.8" data-path="md/html/统一化路径base.html">
            
                
                    <a href="../../md/html/统一化路径base.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.8.</b>
                        
                        统一化路径bace
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.9" data-path="md/html/表格.html">
            
                
                    <a href="../../md/html/表格.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.9.</b>
                        
                        表格
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.10" data-path="md/html/热区.html">
            
                
                    <a href="../../md/html/热区.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.10.</b>
                        
                        热区
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.11" data-path="md/html/audio.html">
            
                
                    <a href="../../md/html/audio.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.11.</b>
                        
                        音频
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.12" data-path="md/html/picture.html">
            
                
                    <a href="../../md/html/picture.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.12.</b>
                        
                        picture
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.13" data-path="md/html/video.html">
            
                
                    <a href="../../md/html/video.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.13.</b>
                        
                        视频
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.14" data-path="md/html/form.html">
            
                
                    <a href="../../md/html/form.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.14.</b>
                        
                        form表单
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter active" data-level="3.14.1" data-path="md/html/input.html">
            
                
                    <a href="../../md/html/input.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.14.1.</b>
                        
                        input应用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.14.2" data-path="md/html/form1.html">
            
                
                    <a href="../../md/html/form1.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.14.2.</b>
                        
                        扩展的表单功能
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4" data-path="md/css/css.html">
            
                
                    <a href="../../md/css/css.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                        CSS
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.1" data-path="md/css/CSS的引入方式.html">
            
                
                    <a href="../../md/css/CSS的引入方式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.1.</b>
                        
                        css的引入方式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.2" data-path="md/css/元素选择器.html">
            
                
                    <a href="../../md/css/元素选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.2.</b>
                        
                        元素选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.3" data-path="md/css/class和id选择器.html">
            
                
                    <a href="../../md/css/class和id选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.3.</b>
                        
                        class和id选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.4" data-path="md/css/关系选择器.html">
            
                
                    <a href="../../md/css/关系选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.4.</b>
                        
                        关系选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.5" data-path="md/css/伪类选择器.html">
            
                
                    <a href="../../md/css/伪类选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.5.</b>
                        
                        伪类选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.6" data-path="md/css/属性选择器.html">
            
                
                    <a href="../../md/css/属性选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.6.</b>
                        
                        属性选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.7" data-path="md/css/伪对象选择器.html">
            
                
                    <a href="../../md/css/伪对象选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.7.</b>
                        
                        伪对象选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.8" data-path="md/字体样式.html">
            
                
                    <a href="../../md/字体样式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.8.</b>
                        
                        字体样式
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.8.1" data-path="md/css/font.html">
            
                
                    <a href="../../md/css/font.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.8.1.</b>
                        
                        Font
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.8.2" data-path="md/css/color.html">
            
                
                    <a href="../../md/css/color.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.8.2.</b>
                        
                        color
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.8.3" data-path="md/css/text-decoration.html">
            
                
                    <a href="../../md/css/text-decoration.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.8.3.</b>
                        
                        text-decoration
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.8.4" data-path="md/css/text-shadow.html">
            
                
                    <a href="../../md/css/text-shadow.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.8.4.</b>
                        
                        text-shadow
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4.9" data-path="md/元素样式.html">
            
                
                    <a href="../../md/元素样式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.9.</b>
                        
                        元素样式
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.9.1" data-path="md/css/盒子模型.html">
            
                
                    <a href="../../md/css/盒子模型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.9.1.</b>
                        
                        盒子模型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.9.2" data-path="md/css/margin.html">
            
                
                    <a href="../../md/css/margin.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.9.2.</b>
                        
                        margin
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.9.3" data-path="md/css/padding.html">
            
                
                    <a href="../../md/css/padding.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.9.3.</b>
                        
                        padding
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.9.4" data-path="md/css/块级元素和行内元素.html">
            
                
                    <a href="../../md/css/块级元素和行内元素.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.9.4.</b>
                        
                        块级元素和行内元素
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.9.5" data-path="md/css/行内块元素的对齐.html">
            
                
                    <a href="../../md/css/行内块元素的对齐.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.9.5.</b>
                        
                        行内块元素的对齐
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4.10" data-path="md/布局.html">
            
                
                    <a href="../../md/布局.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.10.</b>
                        
                        布局
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.10.1" data-path="md/css/文档流.html">
            
                
                    <a href="../../md/css/文档流.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.10.1.</b>
                        
                        文档流
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.10.2" data-path="md/css/float.html">
            
                
                    <a href="../../md/css/float.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.10.2.</b>
                        
                        float浮动
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.10.3" data-path="md/css/图片的处理.html">
            
                
                    <a href="../../md/css/图片的处理.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.10.3.</b>
                        
                        图片的处理
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.10.4" data-path="md/css/文字的处理.html">
            
                
                    <a href="../../md/css/文字的处理.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.10.4.</b>
                        
                        文字的处理
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4.11" data-path="md/css/定位.html">
            
                
                    <a href="../../md/css/定位.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.11.</b>
                        
                        定位
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.11.1" data-path="md/css/absolute.html">
            
                
                    <a href="../../md/css/absolute.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.11.1.</b>
                        
                        absolute
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.11.2" data-path="md/css/relative.html">
            
                
                    <a href="../../md/css/relative.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.11.2.</b>
                        
                        relative
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.11.3" data-path="md/css/fixed.html">
            
                
                    <a href="../../md/css/fixed.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.11.3.</b>
                        
                        fixed
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.11.4" data-path="md/css/定位的高级运用.html">
            
                
                    <a href="../../md/css/定位的高级运用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.11.4.</b>
                        
                        定位的高级运用
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4.12" data-path="md/css/scss.html">
            
                
                    <a href="../../md/css/scss.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.12.</b>
                        
                        scss
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.13" data-path="md/css/iconfont.html">
            
                
                    <a href="../../md/css/iconfont.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.13.</b>
                        
                        icon
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.14" data-path="md/css/弹性盒子.html">
            
                
                    <a href="../../md/css/弹性盒子.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.14.</b>
                        
                        弹性盒子
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.15" data-path="md/css/弹性盒子对齐方式.html">
            
                
                    <a href="../../md/css/弹性盒子对齐方式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.15.</b>
                        
                        弹性盒子的对齐方式
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../../" >我的课程记录笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h2 id="input">input</h2>
<p>1.&#x591A;&#x529F;&#x80FD;&#x7684;&#x6807;&#x7B7E;&#xFF0C;&#x53EF;&#x4EE5;&#x6839;&#x636E;type&#x503C;&#x8FDB;&#x884C;&#x5BF9;&#x5E94;&#x529F;&#x80FD;&#x7684;&#x5207;&#x6362;<br>2.type      &#x7C7B;&#x578B;&#x5C5E;&#x6027;&#xFF0C;&#x51B3;&#x5B9A;&#x4E86;&#x8FD9;&#x4E2A;input&#x7684;&#x529F;&#x80FD;&#xFF0C;&#x5982;&#x679C;&#x6CA1;&#x6709;&#x8BBE;&#x7F6E;&#x6216;&#x8005;&#x8BBE;&#x7F6E;&#x4E0D;&#x5408;&#x6CD5;&#x7684;&#x503C;&#x3002;&#x5219;&#x5168;&#x90E8;&#x9ED8;&#x8BA4;&#x4E3A;text&#xFF08;&#x5355;&#x884C;&#x8F93;&#x5165;&#x6846;&#xFF09;<br>3.name      &#x8BE5;&#x6570;&#x636E;&#x6240;&#x5BF9;&#x5E94;&#x7684;&#x540D;&#x5B57;&#xFF0C;&#x4E3B;&#x8981;&#x662F;&#x7ED9;&#x540E;&#x53F0;&#x83B7;&#x53D6;&#x6570;&#x636E;&#x65F6;&#x4F7F;&#x7528;&#x3002;<br>4.value     &#x8BE5;&#x6570;&#x636E;&#x6240;&#x5BF9;&#x5E94;&#x7684;&#x503C;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x586B;&#x5219;&#x9ED8;&#x8BA4;&#x4E3A;&#x7A7A;<br>5.maxlengt  &#x8BE5;&#x6570;&#x636E;&#x7684;&#x503C;&#x6240;&#x5141;&#x8BB8;&#x7684;&#x6700;&#x5927;&#x5B57;&#x7B26;&#x957F;&#x5EA6;<br>6.disabled  &#x7981;&#x7528;&#x8BE5;&#x8F93;&#x5165;&#x6846;&#x5E76;&#x4E14;&#x7981;&#x6B62;&#x63D0;&#x4EA4;&#x8BE5;&#x6570;&#x636E;<br>7.readonly  &#x7981;&#x6B62;&#x8F93;&#x5165;&#x4F46;&#x5141;&#x8BB8;&#x63D0;&#x4EA4;<br>8.size      &#x63A7;&#x5236;&#x8F93;&#x5165;&#x6846;&#x7684;&#x663E;&#x793A;&#x957F;&#x5EA6;
9.placeholder  &#x63D0;&#x793A;&#x8BED;&#x5C5E;&#x6027;</p>
<pre><code>&#x7528;&#x6237;&#x540D;&#xFF1A;&lt;input type=&quot;text&quot; value=&quot;&quot; maxlength=&quot;&quot; placeholder=&quot;&#x7528;&#x6237;&#x540D;&#x8F93;&#x5165;&quot; /&gt;&lt;br /&gt;
&#x5BC6;&#x7801;&#xFF1A;&lt;input type=&quot;password&quot;  name=&quot;pw&quot; placeholder=&quot;&#x8BF7;&#x8F93;&#x5165;&#x5BC6;&#x7801;&quot; /&gt;&lt;br /&gt;
</code></pre><h3 id="radio&#x5355;&#x9009;&#x6846;">radio,&#x5355;&#x9009;&#x6846;</h3>
<p>checked  &#x8868;&#x793A;&#x9009;&#x4E2D;&#x72B6;&#x6001;&#xFF08;&#x5355;&#x9009;&#x6846;&#x53EA;&#x5141;&#x8BB8;&#x8BBE;&#x7F6E;&#x5176;&#x4E2D;&#x4E00;&#x4E2A;&#x4E3A;checked&#xFF09;<br>name     &#x9700;&#x8981;&#x4FDD;&#x8BC1;&#x591A;&#x4E2A;&#x5355;&#x9009;&#x9009;&#x9879;&#x7684;&#x540D;&#x5B57;&#x662F;&#x4E00;&#x6837;&#x7684;&#xFF08;&#x540D;&#x5B57;&#x4E00;&#x6837;&#x7684;&#x5206;&#x4E3A;&#x4E00;&#x7EC4;&#xFF0C;&#x4E00;&#x7EC4;&#x5185;&#x5355;&#x9009;&#x5176;&#x4E2D;&#x4E4B;&#x4E00;&#xFF09;<br>value   &#x8D4B;&#x503C;&#x4FDD;&#x8BC1;&#x540E;&#x53F0;&#x80FD;&#x62FF;&#x5230;&#x6570;&#x636E;<br>label  &#x5173;&#x8054; &#x70B9;&#x51FB;&#x2018;&#x7537;&#x2019;&#x8FD9;&#x4E2A;&#x5B57;&#x7684;&#x65F6;&#x5019;&#x4E5F;&#x53EF;&#x4EE5;&#x9009;&#x4E2D;  &#x82E5;&#x4E0D;&#x5173;&#x8054;&#x53EA;&#x70B9;&#x51FB;&#x9009;&#x6846;&#x3002;</p>
<pre><code>&#x6027;&#x522B;&#xFF1A;&lt;label for=&quot;man&quot;&gt;&#x7537;&lt;/label&gt;&lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;1&quot; id=&quot;man&quot; checked/&gt;
    &lt;label for=&quot;women&quot;&gt;&#x5973;&lt;/label&gt;&lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;2&quot; id=&quot;women&quot;/&gt;&lt;br /&gt;
</code></pre><h3 id="checkbox-&#x590D;&#x9009;&#x6846;">checkbox &#x590D;&#x9009;&#x6846;</h3>
<p>name &#x867D;&#x7136;&#x540D;&#x5B57;&#x53EF;&#x4EE5;&#x4E0D;&#x4E00;&#x6837;&#xFF0C;&#x4F46;&#x56E0;&#x4E3A;&#x8868;&#x793A;  &#x8868;&#x793A;&#x7684;&#x662F;&#x540C;&#x4E00;&#x4E2A;&#x6570;&#x636E;&#xFF0C;&#x6240;&#x4EE5;&#x5EFA;&#x8BAE;&#x8981;&#x7528;&#x76F8;&#x540C;&#x7684;&#x540D;&#x5B57;&#xFF0C;&#x5E76;&#x4E14;&#x662F;&#x4E00;&#x4E2A;&#x6570;&#x7EC4;(&#x4F8B;&#x5982;&quot;movies[]&quot;)&#xFF0C;&#x65B9;&#x4FBF;&#x540E;&#x53F0;&#x83B7;&#x53D6;&#x591A;&#x7EC4;&#x6570;&#x636E;&#x3002;</p>
<pre><code>&#x6700;&#x7231;&#x770B;&#x7684;&#x7535;&#x5F71;&#xFF1A;
&#x6218;&#x72FC;2 &lt;input type=&quot;checkbox&quot; name=&quot;movies[]&quot;  value=&quot;1&quot; checked/&gt;|
&#x4F60;&#x7684;&#x540D;&#x5B57; &lt;input type=&quot;checkbox&quot; name=&quot;movies[]&quot;  value=&quot;2&quot; /&gt; |
&#x6B63;&#x4E49;&#x8054;&#x76DF; &lt;input type=&quot;checkbox&quot; name=&quot;movies[]&quot;  value=&quot;3&quot; checked/&gt;| 
&#x6740;&#x7834;&#x72FC; &lt;input type=&quot;checkbox&quot; name=&quot;movies[]&quot;  value=&quot;4&quot; /&gt;
</code></pre><h3 id="select--&#x4E0B;&#x62C9;&#x6846;-&#xFF08;&#x9ED8;&#x8BA4;&#x5355;&#x9009;&#x6A21;&#x5F0F;&#xFF09;">select  &#x4E0B;&#x62C9;&#x6846; &#xFF08;&#x9ED8;&#x8BA4;&#x5355;&#x9009;&#x6A21;&#x5F0F;&#xFF09;</h3>
<p>&#x6CE8;&#x610F;&#xFF1A;select&#x548C;option&#x662F;&#x56FA;&#x5B9A;&#x7684;&#x7EC4;&#x5408;&#xFF0C;&#x7F3A;&#x4E00;&#x4E0D;&#x53EF;<br>multiple  &#x52A0;&#x4E0A;&#x8BE5;&#x5C5E;&#x6027;&#xFF0C;&#x5219;&#x53D8;&#x4E3A;&#x591A;&#x9009;&#x6A21;&#x5F0F;<br>optgroup &#x4E0B;&#x62C9;&#x83DC;&#x5355;&#x5206;&#x7EC4;<br>label  &#x5206;&#x7EC4;&#x7684;&#x540D;</p>
<pre><code>&#x6240;&#x5728;&#x57CE;&#x5E02;&#xFF1A;
            &lt;select name=&quot;city&quot; id=&quot;&quot;&gt;
                &lt;optgroup label=&quot;&#x5E7F;&#x4E1C;&#x7701;&quot;&gt;
                    &lt;option value=&quot;1&quot;&gt;&#x5E7F;&#x5DDE;&lt;/option&gt;
                    &lt;option value=&quot;2&quot;&gt;&#x6DF1;&#x5733;&lt;/option&gt;
                    &lt;option value=&quot;3&quot;&gt;&#x6E05;&#x8FDC;&lt;/option&gt;
                    &lt;option value=&quot;4&quot;&gt;&#x6E5B;&#x6C5F;&lt;/option&gt;
                    &lt;option value=&quot;5&quot;&gt;&#x6C55;&#x5934;&lt;/option&gt;
                &lt;/optgroup&gt;
                &lt;optgroup label=&quot;&#x5176;&#x4ED6;&#x7701;&quot;&gt;
                    &lt;option value=&quot;6&quot;&gt;&#x5E7F;&#x5DDE;&lt;/option&gt;
                    &lt;option value=&quot;7&quot;&gt;&#x6DF1;&#x5733;&lt;/option&gt;
                    &lt;option value=&quot;8&quot;&gt;&#x6E05;&#x8FDC;&lt;/option&gt;
                    &lt;option value=&quot;9&quot;&gt;&#x6E5B;&#x6C5F;&lt;/option&gt;
                    &lt;option value=&quot;10&quot;&gt;&#x6C55;&#x5934;&lt;/option&gt;
                &lt;/optgroup&gt;
            &lt;/select&gt;&lt;br /&gt;
</code></pre><h3 id="file-&#x4E0A;&#x4F20;&#x6587;&#x4EF6;">file &#x4E0A;&#x4F20;&#x6587;&#x4EF6;</h3>
<p>&#x6CE8;&#x610F;&#x4E8B;&#x9879;&#xFF1A;&#x5982;&#x679C;&#x6D89;&#x53CA;&#x5230;&#x6587;&#x4EF6;&#x4E0A;&#x4F20;&#xFF0C;&#x9700;&#x8981;&#x7528;post&#x65B9;&#x5F0F;&#xFF0C;&#x5E76;&#x4E14;form&#x7684;enctype&#x5C5E;&#x6027;&#xFF0C;&#x8981;&#x8BBE;&#x7F6E;&#x4E3A;multipart/form-data<br>multiple  &#x53EF;&#x591A;&#x9009;&#x6587;&#x4EF6;<br>capture  &#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x624B;&#x673A;&#x6253;&#x5F00;&#x7684;&#x7A0B;&#x5E8F;&#xFF08;&#x9488;&#x5BF9;&#x79FB;&#x52A8;&#x7AEF;&#xFF0C;&#xFF09;&#xFF0C;camera&#x3001;camcorder&#x3001;microphone<br>accept   &#x8868;&#x793A;&#x63A5;&#x53D7;&#x7684;&#x6587;&#x4EF6;&#x7C7B;&#x578B;  &#x9650;&#x5236;&#x4E0A;&#x4F20;&#x7C7B;&#x578B;   image/<em>,video/</em>,audio/*  &#x591A;&#x79CD;&#x7C7B;&#x578B;&#x53EF;&#x7528;&#x9017;&#x53F7;&#x9694;&#x5F00;   </p>
<pre><code>&#x5934;&#x50CF;&#xFF1A;&lt;input type=&quot;file&quot; name=&quot;headerurl[]&quot; multiple capture=&quot;camcorder&quot; accept=&quot;image/*&quot;/&gt;
    &lt;input type=&quot;submit&quot; /&gt;&lt;br /&gt;
</code></pre><h3 id="textarea-&#x6587;&#x672C;&#x57DF;&#xFF0C;&#x4E13;&#x95E8;&#x7528;&#x4E8E;&#x591A;&#x884C;&#x6587;&#x672C;">textarea &#x6587;&#x672C;&#x57DF;&#xFF0C;&#x4E13;&#x95E8;&#x7528;&#x4E8E;&#x591A;&#x884C;&#x6587;&#x672C;</h3>
<p>&#x6CE8;&#x610F;&#xFF1A;&#x6CA1;&#x6709;value&#x5C5E;&#x6027;&#xFF0C;&#x4ED6;&#x7684;&#x503C;&#x662F;&#x76F4;&#x63A5;&#x5199;&#x5728;&#x6807;&#x7B7E;&#x5BF9;&#x4E2D;&#x95F4;<br>cols  &#x5217;&#x6570;&#x8BBE;&#x7F6E;&#x5927;&#x5C0F;<br>rows  &#x884C;&#x6570;  &#x8BBE;&#x7F6E;&#x5927;&#x5C0F;<br>&#x4E5F;&#x53EF;&#x8BBE;&#x7F6E;  placeholder &#x63D0;&#x793A;&#x8BED;   </p>
<pre><code>&lt;textarea placeholder=&quot;&#x54C8;&#x54C8;&#x54C8;&#x54C8;&#x6216;&#x6216;&#x6216;&#x6216;&#x6216;&#x6216;&#x6216;&#x6216;&quot; name=&quot;description&quot; rows=&quot;11&quot; cols=&quot;11&quot;&gt;&lt;/textarea&gt;
</code></pre><h3 id="hidden--&#x9690;&#x85CF;&#x57DF;">hidden  &#x9690;&#x85CF;&#x57DF;</h3>
<p>&#x4E13;&#x95E8;&#x7528;&#x6765;&#x9690;&#x85CF;&#x4E00;&#x4E9B;&#x4E0D;&#x9700;&#x8981;&#x7528;&#x6237;&#x64CD;&#x4F5C;&#x7684;&#x4FE1;&#x606F;<br>&#x6CE8;&#x610F;&#xFF1A;&#x9664;&#x4E86;&#x9690;&#x8EAB;&#xFF0C;&#x5176;&#x4F59;&#x8DDF;text&#x6CA1;&#x533A;&#x522B;   </p>
<pre><code>ip: &lt;input type=&quot;hidden&quot; name=&quot;address&quot; value=&quot;5435.1543.1&quot; /&gt;
</code></pre><h3 id="reset-&#x91CD;&#x7F6E;&#x6309;&#x94AE;">reset &#x91CD;&#x7F6E;&#x6309;&#x94AE;</h3>
<p>&#x628A;&#x8868;&#x5355;&#x8FD8;&#x539F;&#x4E3A;&#x6700;&#x521D;&#x7684;&#x72B6;&#x6001;<br>value &#x63A7;&#x5236;&#x6309;&#x94AE;&#x7684;&#x6587;&#x5B57;&#x663E;&#x793A;   </p>
<pre><code>&lt;input type=&quot;reset&quot; name=&quot;&quot; id=&quot;&quot; value=&quot;&quot; /&gt;
</code></pre><h3 id="image-&#x56FE;&#x7247;&#x63D0;&#x4EA4;&#x6309;&#x94AE;">image &#x56FE;&#x7247;&#x63D0;&#x4EA4;&#x6309;&#x94AE;</h3>
<p>&#x7528;&#x56FE;&#x7247;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x6309;&#x94AE;<br>src   &#x56FE;&#x7247;&#x7684;&#x539F;&#x5730;&#x5740;</p>
<pre><code>&lt;input type=&quot;image&quot; src=&quot;img/QQ&#x56FE;&#x7247;20171208173448.jpg&quot; style=&quot;width: 100px; vertical-align:middle;&quot;/&gt;
</code></pre>
                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../../md/html/form.html" class="navigation navigation-prev " aria-label="Previous page: form表单"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../../md/html/form1.html" class="navigation navigation-next " aria-label="Next page: 扩展的表单功能"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../../gitbook/app.js"></script>

    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-sectionx/sectionx.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"sectionx":{},"expandable-chapters":{},"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
